<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>短信群发</title>
		<link href="css/global.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js" language="javascript"></script>
		<style type="text/css">
.left {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
 
.right {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
.nTab {
	float: left;
	width: 100%;
	margin: 0 auto;
	border: 0px;
	margin-top:3px;
	background: #fff;
	background-position: left;
	background-repeat: repeat-y;
}

.nTab .TabTitle {
	clear: both;
	height: 23px;
	margin-top:5px;
	overflow: hidden;
	border-bottom: 1px solid #cfcfcf;
}

.nTab .TabTitle ul {
	border: 0;
	margin: 0;
	padding: 0;
}

.nTab .TabTitle li {
	float: left;
	width: 55px;
	cursor: pointer;
	padding-top: 5px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 2px;
	list-style-type: none;
}

.nTab .TabTitle .active {
	background-image: url(images/zxg-85x25-on.gif);
	border-right: 0px;
	text-align: center;
	font-weight: bold;
	width: 85px;
	height:25px;
	color: #ffffff;
}

.nTab .TabTitle .normal {
	background-image: url(images/zxg-85x25-out.gif);
	border-right: 0px;
	text-align: center;
	width: 85px;
	height:25px;
	color: #000000;
}

.nTab .TabContent {
	width: auto;
	background: #fff;
	margin: 0px auto;
	padding: 10px;
	padding-left:0px;
	overflow-x: hidden;
	overflow-y: auto;
}

.none {
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
}		
</style>
	</head>
	<body>
		<div class="div1" style="margin-top: 5px; overflow: hidden;">
			<div class="position" id="head">
				<div style="float: left;">
					<img src="images/dangqian25.gif" style="float: left;" />
					<span style="padding-left: 2px;">短信发送</span>
				</div>
			</div>
			<div style="margin-top: 2px;" id="main">
				<table style="height: 100%; border: none;">
					<tr>
						<td style="height: 20%; width: 50%;" valign="top" id="leftsearch">
							<div style="padding-left: 10px; ">
								<table width="100%" cellpadding="0" cellspacing="0" class="atable">
									<tr>
										<td align="left" width="60">
											手机号码
										</td>
										<td width="120" >
											<input id="txtMobile_search" type="text" value=""
												onkeyup="this.value=this.value.replace(/D/g,'')"
												onafterpaste="this.value=this.value.replace(/D/g,'')" />
										</td>
										<td align="left">
											发送状态
										</td>
										<td width="120" align="left">
											<select name="status_search" id="status_search" value="">
												<option value="">
													全部
												</option>
												<option value="1">
													发送中
												</option>
												<option value="2">
													已发送
												</option>
												<option value="0">
													待发送
												</option>
												<option value="-2">
													待审核
												</option>
												<option value="-1">
													已取消
												</option>
											</select>
										</td>
									</tr>
									<tr>
										<td align="left" width="60">
											起始日期
										</td>
										<td width="120" align="left">
											<input id="startDay_search" type="text" value=""
												readonly="readonly"
												onclick="WdatePicker({dateFmt:'yyyyMMdd',el:'startDay_search',skin:'default',isShowClear:false,isShowToday:false});" />
										</td>
										<td align="left" width="60">
											结束日期
										</td>
										<td width="120" align="left">
											<input id="endDay_search" type="text" value=""
												readonly="readonly"
												onclick="WdatePicker({dateFmt:'yyyyMMdd',el:'endDay_search',skin:'default',isShowClear:false,isShowToday:false});" />
										</td>
									</tr>
									<tr id="otherSearch" style='display: none'>
										<td align="left" width="60">
											客户号
										</td>
										<td width="120" align="left">
											<input id="customerID_search" type="text" value="" />
										</td>
										<td align="left" width="60">
											内容
										</td>
										<td width="120" align="left">
											<input id="content_search" type="text" value="" />
										</td>
									</tr>
									<tr>
										<td align="left">
											<input id="Button_search" type='button' value='其他条件' onclick='otherSearchShow()' class="cmbutton" />
										</td>
										<td align="left">
											&nbsp;
										</td>
										<td align="left">
											&nbsp;
										</td>
										<td align="left" id="searchControl">
											<input id="Button" type='button' value='查 找'
												onclick='search()' class="button52" />&nbsp;
											<input id="search_cancel" type='button' value='清 空'
												onclick="cancelAll()" class="button52" />
										</td>
									</tr>
								</table>
							</div>
						</td>
						<td rowspan="2" valign="top" id="rightdetil">
							<div id="right" class="right">
								 <table border='0' cellspacing='0' cellpadding='0' style="table-layout: fixed; width: 100%; * width: auto;" class="atable">
								 	 <tr>
									 	 <td colspan='3' align='left' valign='top' style='padding-left: 7px; width: 100%;'>
									 	 	 <fieldset  style='margin-right: 10px; margin-bottom: 10px; padding: 10px;'>
									 	 	 <legend style='font-weight:bold;font-size:large;'>客户信息</legend>
									 	 	 <table cellpadding='0' cellspacing='0' width='100%' border='0' class="atable">
									 	 	 	<tr>
										 	 	 	<td align='left'>
										 	 	 		编号：10086
										 	 	 	</td>
										 	 	 	<td></td>
										 	 	 	<td width='120' align='center'></td>
									 	 	 	</tr>
									 	 	 	<tr>
									 	 	 		<td align='left'>
									 	 	 			时间：
									 	 	 		</td>
									 	 	 		<td></td>
									 	 	 		<td width='120' rowspan='2' align='center' bgcolor='#a6abb1' style='margin-top:2px;color: #FFF;text-align: center;'>
									 	 	 			<span style='color: #fff; font-size: 18px; font-weight: bold; '>未发送</span>
									 	 	 		</td>
									 	 	 	</tr>
									 	 	 	<tr>
									 	 	 		<td colspan='2' align='left'>
									 	 	 			客户账号：<a  style='font-weight:bold;font-size:large;' href='#' onclick='showTaskProperties("111")'>admin</a>
									 	 	 		</td>
									 	 	 		<td></td>
									 	 	 	</tr>
									 	 	 	<tr>
									 	 	 		<td align='left'>
									 	 	 			优先级：AAAAA
									 	 	 		</td>
									 	 	 		<td rowspan='2' colspan='2' width='120' align='right' >
									 	 	 			<input style='float:right;margin-right:20px;' type='button' value='取消发送' onclick='cancel_send("11")' />
									 	 	 		</td>
									 	 	 	</tr>
									 	 	 </table>
									 	 	 </fieldset>
									 	 </td>
								 	 </tr>
								 	 <tr>
								 	 	<td colspan='3' align='left' valign='top' style='padding-left: 7px; width: 100%;'>
									 	 	<fieldset style='margin-right: 10px; margin-bottom: 10px; padding: 10px; word-break: break-all;'>
									 	 	<legend style='font-weight:bold;font-size:large;'>内容</legend>
									 	 	<table width='100%' class="atable">
									 	 	<tr><td>预览<input type='button' style='cursor:hand;'  onclick='ShowMMSView()' value='预览'></td></tr>
									 	 	<tr><td  style="text-align: right;">字数：500</td></tr>
									 	 	<tr><td><input style='float: right;' type='button'  style='cursor:hand;'  value='查看上行'onclick='showReplyForTask("1")' /></td></tr>
									 	 	</table>
									 	 	</fieldset>
								 	 	</td>
								 	 </tr>
								 	 <tr >
								 	 	<td colspan='3' align='left' valign='top' style='padding-left: 10px; width: 100%;'>
								 	 		<fieldset style='margin-right: 10px; margin-bottom: 10px; padding: 10px;'>
								 	 		<legend style='font-weight:bold;font-size:large;'> 发送统计 </legend>
								 	 		<table width='100%' border='0' cellspacing='0' cellpadding='0' class="atable">
								 	 		<tr>
									 	 		<td width='90px;' align='left'> 号码总量：</td>
									 	 		<td align='left' width='40px;'>100</td>
									 	 		<td width='90px;' align='left'>拆分总量：</td>
									 	 		<td>100</td>
									 	 		<td width='120' rowspan='2' align='center' bgcolor='#a6abb1' style='color: #FFF;text-align: center;'>
									 	 		发送率<br /><span style='color: #fff; font-size: 18px; font-weight: bold;'>100.00%</span>
									 	 		</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>已发号码量：</td>
								 	 			<td align='left' width='40px;'>100</td>
								 	 			<td width='90px;' align='left'>已发总量：</td>
								 	 			<td align='left' width='40px;'>100</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>取消号码量：</td>
								 	 			<td align='left'  width='40px;'>0</td>
								 	 			<td width='90px;' align='left'>&nbsp;</td>
								 	 			<td>&nbsp;</td>
								 	 			<td align='center' width='40px;'>&nbsp;</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>待发号码量：</td>
								 	 			<td align='left'  width='40px;'>0</td>
								 	 			<td width='90px;' align='left'>&nbsp;</td>
								 	 			<td>&nbsp;</td>
								 	 			<td align='center' width='40px;'>&nbsp;</td>
								 	 		</tr>
								 	 		</table>
								 	 		</fieldset>
								 	 	</td>
								 	 </tr>
								 	 <tr >
								 	 	<td colspan='3' align='left' valign='top' style='padding-left: 10px; width: 100%;'>
								 	 		<fieldset style='margin-right: 10px; margin-bottom: 10px; padding: 10px;'>
								 	 		<legend style='font-weight:bold;font-size:large;'> 回执统计 </legend>
								 	 		<table width='100%' border='0' cellspacing='0' cellpadding='0' class="atable">
								 	 		<tr>
									 	 		<td width='90px;' align='left'> 发送总量：</td>
									 	 		<td align='left' width='40px;'>100</td>
									 	 		<td width='90px;' align='left'>&nbsp;</td>
									 	 		<td>&nbsp;</td>
									 	 		<td width='120' rowspan='2' align='center' bgcolor='#a6abb1' style='color: #FFF;text-align: center;'>
									 	 		到达率<br /><span style='color: #fff; font-size: 18px; font-weight: bold;'>100.00%</span>
									 	 		</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>成功总量：</td>
								 	 			<td align='left' width='40px;'><a  style='font-weight:bold;font-size:large;' href='#' onclick='showTaskProperties("111")'>100</a></td>
								 	 			<td width='90px;' align='left'>&nbsp;</td>
								 	 			<td align='left' width='40px;'>&nbsp;</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>失败总量：</td>
								 	 			<td align='left'  width='40px;'>0</td>
								 	 			<td width='90px;' align='left'>&nbsp;</td>
								 	 			<td>&nbsp;</td>
								 	 			<td align='center' width='40px;'>&nbsp;</td>
								 	 		</tr>
								 	 		<tr>
								 	 			<td width='90px;' align='left'>未知总量：</td>
								 	 			<td align='left'  width='40px;'>0</td>
								 	 			<td width='90px;' align='left'>&nbsp;</td>
								 	 			<td>&nbsp;</td>
								 	 			<td align='center' width='40px;'>&nbsp;</td>
								 	 		</tr>
								 	 		</table>
								 	 		</fieldset>
								 	 	</td>
								 	 </tr>
								 	 <tr>
								 	 	<td colspan='3' align='left' valign='top' style='padding-left: 10px; width: 100%;'>
								 	 		<fieldset style='margin-right: 10px; margin-bottom: 10px; padding: 10px;'>
								 	 		<legend style='font-weight:bold;font-size:large;'> 分通道发送统计 </legend>
								 	 		<div class='nTab'>
									 	 		<div class='TabTitle'>
										 	 		<ul id ='myTab1'>
										 	 		<li class='active' onclick='nTabs(this,"1")'>移动</li>
										 	 		<li class='normal' onclick='nTabs(this,"2")'>联通</li>
										 	 		<li class='normal' onclick='nTabs(this,"3")'>电信</li>
										 	 		</ul>
									 	 		</div>
								 	 			<div class='TabContent'>
									 	 			<div id='myTab1_Content1' width='100%' class=''>
									 	 				<table width='100%' border='0' cellspacing='0' cellpadding='0' class="atable">
												 	 		<tr>
												 	 			<td width='90px;'>通道：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>状态：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>分拣时间：</td>
												 	 			<td align='left' >2012-03-03 15：28：00</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>发送开始时间：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>发送结束时间：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>号码量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>拆分后总量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>已发送量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>回执量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>成功数量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>未知数量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 		<tr>
												 	 			<td width='90px;'>失败数量：</td>
												 	 			<td align='left' >0</td>
												 	 		</tr>
												 	 	</table>
									 	 		    </div>
									 	 		 </div>
								 	 		</div>
								 	 		</fieldset>
								 	 	</td>
								 	  </tr>
								 </table>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" id="leftlist" >
							<div id="left" class="left">
							 	<table>
							 		<tbody>
							 			<tr style="background-color: #EEEEEE;">
							 				<th>批次编号</th>
							 				<th>创建时间</th>
							 				<th>发送内容</th>
							 				<th>发送状态</th>
							 			</tr>
							 			<c:forEach items="${raskQueryList}" var="item" varStatus="s">
							 			<tr>
							 				<td>${item.batchid }</td>
							 				<td><fmt:formatDate value="${item.createtime }"/> </td>
							 				<td>${item.message }</td>
							 				<td>${item.status }</td>
							 			</tr>
							 			</c:forEach>
							 		</tbody>
							 	</table>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript"> 
autoHeight(); 
window.onresize = function(){
	autoHeight();
};
function autoHeight(){
	var screen = document.documentElement.clientHeight;
	var head = document.getElementById("head").offsetHeight+15;
	document.getElementById("main").style.height = Number(screen) - Number(head)+ "px";
	var leftsearch = document.getElementById("leftsearch").offsetHeight+4;
	document.getElementById("leftlist").style.height =Number(screen) - Number(head) - Number(leftsearch)+ "px";
	document.getElementById("rightdetil").style.height =Number(screen) - Number(head)-4+ "px";
}
function otherSearchShow(){
	autoHeight();
	if($("#Button_search").val()=="其他条件"){
		$("#otherSearch").show();
		$("#Button_search").attr("value","收起条件");
		autoHeight2();
	}else{
		$("#otherSearch").hide();
		$("#Button_search").attr("value","其他条件");
		autoHeight3();
	}
}
function autoHeight2(){
	var main = document.getElementById("main").offsetHeight;
	var leftsearch = document.getElementById("leftsearch").offsetHeight;
	document.getElementById("leftlist").style.height =Number(main) - Number(leftsearch)-4+ "px";
}
function autoHeight3(){
	var main = document.getElementById("main").offsetHeight;
	var leftsearch = document.getElementById("leftsearch").offsetHeight;
	document.getElementById("leftlist").style.height =Number(main) - Number(leftsearch)+1+ "px";
}
function cancelAll()
{
$("#txtMobile_search").attr("value","");
$("#status_search").attr("value","");
$("#startDay_search").attr("value","");
$("#endDay_search").attr("value","");
$("#customerID_search").attr("value","");
$("#content_search").attr("value","");
}
</script>
</html>
